<template>
  <div class="distribution-container">
    <!-- 面包屑 -->
    <div style="width: auto;height: 60px;font-size: larger;">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/Main' }">仪表台</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/Inventory' }">库存查询</el-breadcrumb-item>
    <el-breadcrumb-item>库存分布</el-breadcrumb-item>
  </el-breadcrumb>
    </div>
    <!-- 汇总 -->
    <div style="height: 200px;width: auto;">
        <!-- 入库 -->
        <div style="height: 150px;width: 450px;border: solid;color:darkgray;margin-right: 150px;float: left;margin-left: 100px;">
            <table>
                <tr style="height: 60px;color: black;font-size: larger">
                    <th>&ensp; &ensp;&ensp; {{ num.sumnum1 }}</th>
                    <th>&ensp; &ensp; &ensp;&ensp; &ensp; &ensp;</th>
                    <th>&ensp; &ensp; &ensp;&ensp;&ensp; {{ num.sumnum2 }}</th>
                </tr>
                 <tr style="height: 60px;color:chocolate;font-size: larger;">
                    <th>&ensp; &ensp; &ensp; 当前库存</th>
                    <th>&ensp; &ensp; &ensp;&ensp; &ensp; &ensp;</th>
                     <th>&ensp; &ensp; &ensp; 可用库存</th>
                </tr>
            </table>
        </div>
        <!-- 出库 -->
         <div style="height: 150px;width: 450px;border: solid;color:darkgray;float: left;">
            <table>
                <tr style="height: 60px;color: black;font-size: larger;">
                    <th>&ensp; &ensp;&ensp;&ensp; {{ num.sumnum3 }}</th>
                    <th>&ensp; &ensp; &ensp;&ensp; &ensp; &ensp;</th>
                    <th>&ensp; &ensp; &ensp;&ensp;&ensp; {{ num.sumnum4 }}</th>
                </tr>
                 <tr style="height: 60px;color: chocolate;font-size: larger;">
                    <th>&ensp; &ensp;&ensp;&ensp; 待出库</th>
                    <th>&ensp; &ensp; &ensp;&ensp; &ensp; &ensp;</th>
                    <th>&ensp; &ensp; &ensp; &ensp;&ensp;&ensp;待入库</th>
                </tr>
            </table>
        </div>
       
    </div>
    <!-- 数据容器 -->
    <div class="data-container">
      <!-- 表格 -->
      <div class="table-section">
        <el-table :data="tableData" style="width: 100%;font-size: large;">
    <el-table-column fixed type="index" label="行号" width="150" />
    <el-table-column prop="warename" label="仓库名称" width="150" />
    <el-table-column prop="locationName" label="库位名称" width="150" />
    <el-table-column prop="inventory" label="当前库存" width="150" />
    <el-table-column prop="availableInventory" label="可用库存" width="150" />
    <el-table-column prop="inNum" label="入库数量" width="150" />
    <el-table-column prop="outNum" label="出库数量" width="150" />
        </el-table>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import service from '@/utils/request';
import type { RefSymbol } from '@vue/reactivity'
import axios from 'axios'
import { onMounted, reactive, ref, watch } from 'vue'
import { useRoute,useRouter } from 'vue-router';
const route=useRoute();
const router=useRouter();
onMounted(()=>{
  show();
  numcount()
})

const tableData=ref([])
const num=reactive({
 sumnum1:0,
 sumnum2:0,
 sumnum3:0,
 sumnum4:0,
})
 var id=route.query.id;
const show =()=> {
   
  service.get('/api/app/standing__Book/inventory_Distribution/'+id).then(res=>{
      tableData.value=res.data.resultData
      

    })
  }
  const numcount=()=>{
 service.get('/api/app/standing__Book/num/'+id).then(res=>{
      
      num.sumnum1=res.data.resultData.q1
      num.sumnum2=res.data.resultData.q2
      num.sumnum3=res.data.resultData.q3
      num.sumnum4=res.data.resultData.q4

    })
  }
watch(num,()=>{
  show()
  numcount()
})
</script>

<style>
.distribution-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #e3f0ff 0%, #f8fbff 100%);
  padding: 20px;
}

/* 汇总卡片样式 */
.distribution-container > div:nth-child(2) > div {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: none !important;
  margin-bottom: 20px;
}

/* 数据容器样式 */
.data-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 20px;
}

/* 表格区域样式 */
.table-section {
  padding: 0;
}

.table-section .el-table {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>